<template>
	<div>
		<el-row class="btn-group">
			<el-button type="primary" @click="openDialog">导入名单</el-button>
			<el-button type="success" @click="exportBtn(tableData)"
				>导出名单</el-button
			>
			<el-button type="info" @click="refreshData">刷新</el-button>
		</el-row>

		<el-table :data="tableData" border stripe style="width: 100%">
			<el-table-column
				property="studentID"
				label="学号"
				width="200"
			></el-table-column>
			<el-table-column property="studentName" label="姓名"></el-table-column>
			<el-table-column property="isFree" label="是否免费"></el-table-column>
			<el-table-column property="grade" label="年级"></el-table-column>
			<el-table-column property="department" label="学院"></el-table-column>
			<el-table-column property="isPos" label="是否保研"></el-table-column>
			<el-table-column
				property="id"
				label="身份证号"
				width="250"
			></el-table-column>
			<el-table-column property="times" label="第几次考试"></el-table-column>
			<el-table-column property="term" label="考试届数"></el-table-column>
		</el-table>

		<el-dialog title="报名名单" width="50%" center v-model="dialogIsVisvited">
			<import-sign-up-student @success="closeDialog"></import-sign-up-student>
		</el-dialog>
	</div>
</template>

<script>
import ImportSignUpStudent from "@/components/ImportSignUpStudent.vue";
let XLSX = require("xlsx");

export default {
	name: "SignUpStudent",
	components: {
		ImportSignUpStudent,
	},
	data() {
		return {
			dialogIsVisvited: false,
			tableData: [],
		};
	},
	methods: {
		exportBtn(tableData) {
			let worksheet = XLSX.utils.json_to_sheet(tableData);
			let workbook = XLSX.utils.book_new();
			XLSX.utils.book_append_sheet(workbook, worksheet, "第一页");
			XLSX.writeFile(workbook, "未报名名单.xlsx");
		},
		openDialog() {
			this.dialogIsVisvited = true;
		},
		refreshData() {
			fetch(`${this.$store.getters.point}/Admin/preSignUp/getUnSignList`, {
				method: "POST",
			})
				.then((response) => response.text())
				.then((result) => {
					this.tableData = JSON.parse(result).data;
					this.tableData.forEach((item) => {
						item.isFree = parseInt(item.isFree) === 0 ? "否" : "是";
						item.isPos = parseInt(item.isPos) === 0 ? "否" : "是";
					});
				});
		},
		closeDialog() {
			this.refreshData();
			this.dialogIsVisvited = false;
		},
	},
	mounted() {
		this.refreshData();
	},
};
</script>

<style scoped>
.btn-group {
	margin-bottom: 30px;
}
</style>
